一、使用GSAP

前一篇我們花了一點時間，把 GSAP 安裝進自己的專案。現在終於可以來試試看，它到底可以幫我們做什麼。
先在 HTML 放一個方塊：

<div class="box"></div>

再用CSS讓方塊呈現出來:

.box{
    width: 100px;
    height: 100px;
    background: black;
}

再來是引入 GSAP 以及動畫想要什麼動畫效果，這裡需要JavaScript:

import { gsap } from "gsap"; //引入
gsap.to(
    ".box",{
        x:300, //移動
        duration: 1
    }
)

初始位置會在左上角，上述程式碼意思是

1秒內會向右移動300px

二、會遇到的問題

以上在學習過程中，以為都會順利使用GSAP，卻在這時候瀏覽器出現:

Failed to resolve module specifier "gsap"

一開始我以為是 npm install gsap 沒有成功。但檢查 node_modules 後，GSAP 明明就在裡面。那到底是為什麼呢?

問題就出在：

瀏覽器不知道 npm 套件要去哪裡找。所以不能只是把 HTML 直接打開，還需要使用像 Vite 這類開發工具，幫我們處理 npm 套件與模組。所以這裡我們要修正 json 的使用方法。這裡先更正 project.json 裡面的模組:

{
    "name": "ithome",
    "version": "1.0.0",
    "scripts": {
        "dev": "vite"
    },
    "dependencies": {
        "gsap": "^3.15.0"
    },
    "devDependencies": {
        "vite": "^7.3.6"
    }
}

再安裝 Vite，在終端機輸入：

npm install -D vite

最後執行：

npm run dev

用 Vite 提供的網址開啟網頁後，GSAP 就可以正常載入了。

三、結論

這次沒有自己計算位置，也不用處理動畫過程。只要告訴 GSAP：

我要誰動?
要移動到哪裡?
花多久?

它就會幫我們完成這些事情。
這一篇先學會一點皮毛，明天我們再來繼續探討GSAP還能做什麼事吧。